<script setup>
import { onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
// import {updateUserInfoAPI} from '@/apis/userAPI'

const form=reactive({
    id:'',
    userName:'',
    phone:'',
    email:'',
    status:0,
    createTime:'',
    updateTime:''
})
onMounted(async()=>{
    try{
        form.id='1',
        form.userName='123',
        form.phone='13345678912',
        form.email='1254@qq.com'
        form.createTime='565',
        form.updateTime='4555'
        // const res=await getUserInfo(1)
        // Object.assign(form,res.data)
    }catch(e){
        // ElMessage.error("获取用户信息失败");
        console.error(e)
    }
})
async function save(){
    try{
        // await updateUserInfoAPI(form)
        ElMessage.success("保存成功")
    }catch(e){
        // ElMessage.error("保存失败")
        console.error(e)
    }


}
</script>
<template>
<div class="user_bg">
    <div class="user_container">
        <el-form style="width: 80%" :model="form" label-width="100px">
            <el-form-item label="用户id:">
                <el-input v-model="form.id" />
            </el-form-item>
            <el-form-item label="用户名称:">
                <el-input v-model="form.userName" />
            </el-form-item>
            <el-form-item label="手机号:">
                <el-input v-model="form.phone" />
            </el-form-item>
            <el-form-item label="邮箱:">
                <el-input type="email:" v-model="form.email" />
            </el-form-item>
            <el-form-item label="状态:" >
                <el-select v-model="form.status">
                    <el-option label="禁用" :value="0"/>
                    <el-option label="启用" :value="1" selected/>
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间:">
                <el-input v-model="form.createTime" readonly/>
            </el-form-item>
            <el-form-item label="修改时间:">
                <el-input v-model="form.updateTime" readonly />
            </el-form-item>
            <div class="btn_container">
              <el-button class="btn"><a href="javascript:;">取消</a></el-button>
              <el-button class="btn" type="primary" @click="save">保存</el-button>
            </div>
        </el-form>
    </div>
</div>
</template>
<style lang="scss" scoped>
.user_bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #764ba2;
  position: relative;
}
.user_container {
  max-width: 700px;
  display: flex;
  width: 700px;
  margin: 40px;
  background-color: white;
  padding: 50px 40px;
  border-radius: 8px;
  align-items: center;

}
.button-container {
  display: flex;        /* 启用flex布局 */
  justify-content: center; /* 子元素水平居中 */
  gap: 20px;
  text-align: center; /* 容器内元素水平居中 */
}

/* 按钮样式调整 */
.btn {
  width: 120px; /* 固定宽度更适合居中布局，避免30%占比导致的错位 */
  height: 60px;
  margin: 0 10px; /* 两个按钮之间的间距 */
  background-color: white;
  font-size: large;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  color: #764ba2;
}

.btn:hover {
  color: black;
}
</style>
